<template>
	<div class="chinalConfig">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>渠道管理</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form">
				<div class="divider2"></div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
					<div class="import">
						<el-form-item label="游戏名称：" :label-width="formLabelWidth">
							<el-select
							  v-model="region" @change='projectsChange'
							  placeholder="请选择游戏" type="success">
								<el-option
							    v-for="item in projects"
						        :label="item.label"
						        :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="渠道ID：" prop="id":label-width="formLabelWidth">
							<el-input v-model.number="ruleForm.id"></el-input>
						</el-form-item>
						<el-form-item label="渠道名称：" prop="name" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.name"></el-input>
						</el-form-item>
						<el-form-item label="渠道所属平台：" prop="platformName" :label-width="formLabelWidth">
							<el-select
							  v-model="ruleForm.platformId"
							  placeholder="请选择平台" type="success" >
								<el-option
							    v-for="item in platformNameList"
							    :key="item.value"
							    :label="item.label"
							    :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="Auany渠道值：" prop="platName" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.platName"></el-input>
						</el-form-item>
						<el-form-item label="渠道描述：" prop="description" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.description"></el-input>
						</el-form-item>
					</div>
					<el-form-item class="conmit">
						<el-button type="primary" @click="submitForm('ruleForm')" icon="plus">立即添加</el-button>
						<el-button type="primary" @click="resetForm('ruleForm')" icon="search">立即搜索</el-button>
						<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
						<br>
						<span class="warning">（输入搜索条件，留空搜索全部！）</span>
					</el-form-item>
				</el-form>
				<div class="divider2"></div>
			</div>
			<div class="table">
				<el-table
			:data="tableData"
			border 
			style="width: 100%"  >
					<el-table-column align="center" 
					  label="游戏名称">
						<template scope="scope">
							<div slot="reference" class="name-wrapper">
								<el-tag>{{ scope.row.gameName }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="渠道ID"   prop="id"
					  width="100"></el-table-column>
					<el-table-column align="center"
					  label="渠道名称" prop="name">
							<template scope="scope">
									<el-input v-model="scope.row.name"></el-input>
								</template>	
						</el-table-column>
					<el-table-column align="center"
					  label="渠道所属平台 " prop="platformName">
							<template scope="scope">
								<el-select v-model="scope.row.platformId" placeholder="请选择">
									<el-option
										v-for="item in platformNameList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					<el-table-column align="center" prop="platName"
					  label="Auany渠道值">
							<template scope="scope">
									<el-input v-model="scope.row.platName"></el-input>
								</template>							
						</el-table-column>						
						</el-table-column>
					<el-table-column align="center" prop="description"
					  label="渠道描述">
							<template scope="scope">
									<el-input v-model="scope.row.description"></el-input>
								</template>							
						</el-table-column>
					<el-table-column label="操作" align="center" width="300">
						<template scope="scope">
							<el-button type="primary"
					      size="small"
					      @click="edit(scope.$index, scope.row)">修改</el-button>
							<el-button
					      size="small"
					      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="pageSizes"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="dataTotal">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- <div class="revampForm" v-show="revampShow">
			<div class="revampChoose">
				<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="revampForm" :rules="revamp" ref="revampForm" label-width="115px" class="demo-ruleForm">
					<h5>修改渠道</h5>
					<el-form-item label="游戏名称：" prop="region">
						<el-select
						  v-model="ruleForm.region"
						  multiple
						  placeholder="请选择游戏" type="success">
							<el-option
						    v-for="item in options5"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="渠道ID：" prop="enuNum">
						<el-input v-model.number="ruleForm.enuNum"></el-input>
					</el-form-item>
					<el-form-item label="渠道名称：" prop="enuKey">
						<el-input v-model="ruleForm.enuKey"></el-input>
					</el-form-item>
					<el-form-item label="Auany渠道值：" prop="enuValue">
						<el-input v-model="ruleForm.enuValue"></el-input>
					</el-form-item>
					<el-form-item label="渠道描述：">
						<el-input v-model="ruleForm.enuDesc"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="revamp('revampForm')">立即修改</el-button>
						<el-button @click="revampReset('revampForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div> -->
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./chinalConfig.styl"></style>
<script src="./chinalConfig.js"></script>